<template>
	<view>
		<view class="top">
			<view class="zhanwei">
				&nbsp;
			</view>
			<view class="order-nav" :style="{top:BarTop + 'px',height:BarHeight + 'px',lineHeight:BarHeight + 'px'}">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Vector%402x.png" mode="" class="nav-span"></image>
				<view class="nav-span1">
					要啥有啥·好货速达
				</view>
			</view>
			<view class="box" :style="{top:BarTop + BarHeight + 8 + 'px'}" @click="GotoSearch">
				<u-search disabled placeholder="搜索想要兑换的商品" bg-color='#F9FFFD' :clearabled='false' v-model="keyword" :show-action='false'  class="search"></u-search>
				
			</view>
			<view class="banner">
				<image src="https://admin.cqycgyl.com/uploads/20250915/17e2361c6d7fb7062c2df951b98ed9ce.png"></image>
			</view>
		</view>
        <view class="scroll-list-box">
			<uv-scroll-list :indicator="true" indicatorColor="#FFFFFF" indicatorActiveColor="#F16325">
				<view class="scroll-list">
					<view class="scroll-list__line">
						<view v-for="(item, index) in cateListTop" :key="index"  @click="GotomenuInfo(item)" class="scroll-list__line__item">
							<image :src="item.image" mode="heightFix" style="height: 100rpx;"></image>
							<view class="menutop-sp">{{item.name}}</view>
						</view>
					</view>
					<view class="scroll-list__line">
						<view v-for="(item, index) in cateListBottom" :key="index"  @click="GotomenuInfo(item)" class="scroll-list__line__item">
							<image :src="item.image" mode="heightFix" style="height: 100rpx;"></image>
							<view class="menutop-sp">{{item.name}}</view>
						</view>
					</view>
				</view>
			</uv-scroll-list>
		</view>
		
		<!-- <view class="center">
			<view style="width: 100%;height: 28rpx;"></view>
			<view class="center-top">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Group%204193%402x.png" mode="" style="width: 180rpx;height: 32rpx;"></image>
				<view class="center-top-right" @click="recommendMore">
					<view class="center-top-right-span">更多</view>
					<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Vector%2040%402x.png" mode="" style="width: 8rpx;height: 14rpx;"></image>
				</view>
			</view>
			<view class="center-main">
				<liu-goods-swiper :goodsList="goodsList" :imgWidth="152" :imgHeight="152" @clickItem="chooseItem"></liu-goods-swiper>
			</view>
		</view> -->
		
		<view class="footer">
			<view class="goods" v-for="(item,index) in goodsList" :key="index" @click="GotoGoodInfo(item)">
				<image :src="item.image" mode="" class="goodsimg" ></image>
				<view class="goodstitle h66">
					{{item.title.length>20?item.title.slice(0,20)+"...": str }}
				</view>
				<view class="goodstitle goodsprice" style="display: flex; align-items: center;">
					<text style="font-size: 28rpx; line-height:1">券</text>{{item.price}}
				</view>
				<!-- <view class="goodsbtn">
					立即兑换
				</view> -->
			</view>
			<u-loadmore :status="status" style="width: 100%;text-align: center;"/>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				BarTop:'',
				BarHeight:'',
				goodsCache: new Map(), 
				keyword:'', 
				status: 'loadmore',
				data:'',
				mindata:'',
				current3: 0,
				list1: [],
				current:0,
				tabs: [],
				Goods:'',
				page:1,
				seleindex:0,
				pagesize:10,
				url:'https://admin.cqycgyl.com',
				goodsList: [],
				cateList: [],
				cateListTop: [],
				cateListBottom: [],
				obj:{
					perpage:20,
					page:1
				},
			}
		},
		onLoad() { 
			// #ifdef MP
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.BarTop = menuButtonInfo.top;
			this.BarHeight = menuButtonInfo.height;
			// #endif
			
			this.GetList()
			
			this.$u.api.shop.getYoulike(this.obj,{pages:'index'}).then(res =>{
				if(res.code == 1){
					this.goodsList = res.data.data
					if(res.data.data.length == 0){
						this.status = 'nomore'
					}
				}
			})
			// this.getcatelist()
		},
		onReachBottom() {
			// let category_id = this.list1[this.seleindex].id
			this.status = 'loading';
			this.page = ++ this.page;
			let page = {
				page:this.page,
				perpage:this.pagesize
			}
			// let obj = { category_id: category_id };
			// this.$u.api.shop.getCateGoods(obj,page).then(res =>{
			// 	if(res.code == 1){
			// 		this.Goods = [...this.Goods,...res.data.data]
			// 		if(res.data.data.length == 0){
			// 			this.status = 'nomore'
			// 		}
			// 	}
			// })
			this.$u.api.shop.getYoulike(page,{pages:'index'}).then(res =>{
				if(res.code == 1){
					this.goodsList = [...this.goodsList,...res.data.data]
					if(res.data.data.length == 0){
						this.status = 'nomore'
					}
				}
			})
		},
		onShow(){
			
		},
		methods:{
			GotomenuInfo(item){
				uni.navigateTo({
					url:`./menuinfo?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			GotoGoodInfo(item){
				uni.navigateTo({
					url:`./product?id=${item.id}`
				})
			},
			GotoSearch(){
				uni.navigateTo({
					url:'./search'
				})
			},
			changeTab(index) {
				this.list1 = this.tabs[index].sonCate
				this.getGoodsList(0)
				this.current3 = 0
			},
			async getGoodsList(index) {
				let category_id = this.list1[index].id
			    if (this.goodsCache.has(category_id)) {
			      this.Goods = this.goodsCache.get(category_id);
			      return;
			    }
			    let obj = { category_id: category_id };
				let page = {
					page:this.page,
					pagesize:this.pagesize
				}
			    try {
			      const res = await this.$u.api.shop.getCateGoods(obj,page);
			      if (res.code === 1) {
			        let goodsData = res.data.data;
			        this.Goods = goodsData.filter(item =>{
						return item.isnav != 1
					});
			        this.goodsCache.set(category_id, goodsData);
			      }
			    } catch (error) {
			    }
			  },
			change(index) {
				 this.seleindex = index
				 this.getGoodsList(index)
			},
			Gomore(){
				uni.navigateTo({
					url:'./product'
				})
			},
			search(){
			},
			chooseItem(item){
				uni.navigateTo({
					url:`./product?id=${item.id}`
				})
			},
			GetList(){
				this.$u.api.shop.getcatelist().then(res =>{
					if(res.code == 1){
						this.cateList = res.data
						this.cateListTop = res.data.filter((item,index) =>{
							if(item.image !='' && index<7){
								return item
							}
						})
						this.cateListBottom = res.data.filter((item,index) =>{
							if(item.image !='' && index>=7){
								return item
							}
						})
						
						
						
						this.cateListTop.forEach(item =>{
							item.image = this.url + item.image
							item.mini_image = this.url + item.mini_image
						})
						this.cateListBottom.forEach(item =>{
							item.image = this.url + item.image
							item.mini_image = this.url + item.mini_image
						})
		
					}
				})
			},
			getcatelist(){
				this.$u.api.shop.getcatelist().then(res =>{
					if(res.code == 1){
						this.tabs = res.data.filter((item,index) =>{
							return item
						})
						this.list1 = this.tabs[0].sonCate
						this.getGoodsList(0)
					}
				})
			},
			recommendMore(){
				uni.navigateTo({
					url: '/pageA/shop/recommend'
				})
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.zhanwei{
		width: 100%;
		height: 106rpx;
	}
	.top{
		width: 750rpx;
		height: 536rpx;
		position: relative;
		background: url('https://admin.cqycgyl.com/uploads/20250915/c32157406b8a847f55d3518f4e09be06.png') center/cover,white;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		
	}
	.top>*{
		flex-shrink: 0;

	}
	.order-nav{
		width: 100%;
		width:450rpx;
		margin-left: 32rpx;
		display: flex;
		align-items: center;
	}
	.nav-span{
		width: 176rpx;
		height: 40rpx;
	}
	.nav-span1{
		width: 236rpx;
		height: 38rpx;
		margin-left: 10rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Rectangle%402x.png') center/cover;
		text-align: center;
		line-height: 38rpx;
		font-size: 22rpx;
		color: #312A28;
	}
	.search{
		width: 100%;
		height: 100%;
	}
	.search-sp{
		width: 100rpx;
		height: 28rpx;
		position: absolute;
		z-index: 10;
		line-height: 28rpx;
		border-left: #E8EDE9 1px solid;
		color: #36BE6A;
		font-size: 28rpx;
		top:19rpx;
		text-align: center;
	}
	.box{
		width: 708rpx;
		height: 72rpx;
		margin-left: 30rpx;
		display: flex;
		margin-top: 30rpx;
	}
	.box1{
		width: 100rpx;
		height: 72rpx;
		position: absolute;
		z-index: 10;
		top: 0;
		right: 10rpx;
	}
	.bottom{
		width: 214rpx;
		height: 60rpx;
		position: absolute;
		bottom: 92rpx;
		right:100rpx;
	}
	.center{
		width: 690rpx;
		height: 332rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Group%204075%402x.png') center/cover;
		margin-left: 30rpx;
	}
	.center-top{
		width: 632rpx;
		margin-left: 30rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		align-items: center;
	}
	.center-top-right{
		width: 64rpx;
		height: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.center-top-right-span{
		font-size: 24rpx;
		color: #7F7F81;
	}
	.center-main{
		height: 240rpx;
		width: 660rpx;
		margin-left: 30rpx;
		margin-top: 24rpx;
		overflow: hidden;
	}
	.menutop-sp{
		width: 92rpx;
		height: 20rpx;
		font-size: 22rpx;
		line-height: 20rpx;
		text-align: center;
		color: #4B4B4B;
	}
	.box12{
		height: 78rpx;
		
	}
	.List-top{
		width: 750rpx;
		// height: 156rpx;
		height: 20rpx;
		background-color: white;
		margin-top: 32rpx;
		background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
	}
	.tabs-top{
		margin-left: 20rpx;
	}
	.footer{
		width: 690rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 30rpx;
		flex-wrap: wrap;
	}
	.goods{
		width: 338rpx;
		background-color: white;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.goodsimg{
		width: 338rpx;
		height: 332rpx;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}
	.goodstitle{
		width: 306rpx;
		margin-left: 16rpx;
		margin-top: 16rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #313131;
	}

	.h66{
		height: 66rpx;
	}
	.goodsprice{
		margin-top:14rpx;
		font-size: 36rpx;
		color: #F24040;
	}
	.goodsbtn{
		width: 272rpx;
		height: 48rpx;
		margin-left: 34rpx;
		margin-top: 15rpx;
		background-color: #F16325;
		color: white;
		text-align: center;
		line-height: 48rpx;
		font-size: 24rpx;
		border-radius: 42rpx;
	}
	.scroll-list-box{
		width: 750rpx;
		padding: 11rpx 30rpx;
		background: linear-gradient(180deg, #FFFFFF 47%, rgba(255, 255, 255, 0) 88%);
		margin-top: -1rpx;
		position: relative;
	}
	.banner{
		width: 690rpx;
		height: 230rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.scroll-list {
        display: flex;
        flex-direction: column;
		width: 690rpx;
		margin-left: 30rpx;
		&__goods-item {
			margin-right: 20px;
	
			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}
	
			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}
	
		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			display: flex;
			flex-direction: column;
			align-items: center;
	
			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	
		&__line {
			display: flex;
			margin-top: 10px;
	
			&__item {
				margin-right: 20px;
	
				&__image {
					width: 61px;
					height: 48px;
				}
	
				&__text {
					margin-top: 5px;
					color: #f00;
					font-size: 12px;
					text-align: center;
				}
	
				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}
</style>



